<template>
  <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="register">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>

    <el-form-item label="电话号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>

    <el-form-item label="微信号" prop="wechart">
      <el-input v-model="form.wechart"></el-input>
    </el-form-item>

    <el-form-item label="QQ" prop="qq">
      <el-input v-model="form.qq"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="register('form')" style="width:320px">立即注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import request from "../request";
import qs from "qs";
export default {
  name: "register",
  data() {
    return {
      username: "",
      password: "",
      form: {
        username: "",
        password: "",
        email: "",
        phone: "",
        wechart: "",
        qq: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请填写邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号长度为11位", trigger: "blur" },
        ],
        wechart: [{ required: true, message: "请填写微信号", trigger: "blur" }],
        qq: [{ required: true, message: "请填写qq号", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request({
            url: "/register/",
            method: "post",
            data: qs.stringify(this.form),
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("注册成功");
                this.$router.push({
                  name: "home",
                });
                sessionStorage.setItem("userinfo", JSON.stringify(res.data));
                sessionStorage.setItem("login_status", true);
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.register{
    width: 400px;
    margin: auto;
    margin-top: 100px;
}
</style>
